<template>
  <div>
    <span class="detail_text" :class="{hide_detail_text:detailTit}" @click="toogleDeailTit">
      详情
	  <span class="iconshanglaBox"><i class="iconshangla iconfont"></i></span>
    </span>
    <div class="warning_list">
      <span class="warn_leftbtn wbtn" @touchstart.prevent="select(index-1)" v-if="ishow('left')"></span>
      <span class="warn_rightbtn wbtn" @touchstart.prevent="select(index+1)" v-if="ishow('right')"></span>
      <div class="ml30">
        <h5>{{info.alarmXYZDO.alarmName}}</h5>
        <span class="baidumap_icon" v-if="false"></span>
        <p>{{distance}} | {{info.alarmXYZDO.alarmLocation}}</p>
        <div class="vol">
          {{info.alarmXYZDO.alarmDensity}}
          <b
            v-if="info.alarmXYZDO.alarmLevel.length!=0"
          >{{info.alarmXYZDO.alarmLevel}}</b>
          <span>{{info.alarmXYZDO.alarmTime}}</span>
        </div>
      </div>
      <div class="gray_bg"></div>
      <div class="detail_box">
        <h2 class="dborder" @touchstart.prevent="horizontalCurve">
          监测曲线
          <i class="iconfont iconnext" ></i>
        </h2>
        <div class="max_val">
          最高值：{{maxVal}}
          <span>{{maxValTime}}</span>
        </div>
        <div class="d_curve_box" style="height:5rem">
          <monitor-curve
            :timeList="timeList"
            :gasContentList="gasContentList"
            :temprList="temprList"
            :limitVal="limitVal"
            :alarmType="alarmType"
          ></monitor-curve>
        </div>
      </div>
      <!-- <div class="gray_bg"></div>
      <div class="detail_box">
        <h3 v-if="dealTypeStr!=undefined" class="dborder">
          反馈结果
          <span @touchstart.prevent="gotoDealResult">
            <button class="notdisposal">{{dealTypeStr}}</button>
            <i class="iconfont iconnext"></i>
          </span>
        </h3>
        <h3>
          处置状态
          <span class="disposal_status notdisposal">
            {{getstate}}
            <i class="iconfont iconnext" @touchstart.prevent="gotodisposalResult" v-if="getstate.length!=0"></i>
          </span>
        </h3>
      </div> -->
      <div class="gray_bg"></div>
      <div class="detail_box" v-show="info.appUserItem!=''">
        <h2 class="dborder">用户信息</h2>
        <ul>
          <li>
            <span>用户类型</span>
            {{info.appUserItem.type}}
          </li>
          <li>
            <span>用户编号</span>
            {{info.appUserItem.code}}
          </li>
          <li>
            <span>常用联系人</span>
            {{info.appUserItem.userName}}
          </li>
          <li>
            <span>常用联系手机</span>
            {{info.appUserItem.userPhone}}
            <a
              class="iconfont telephoneStyle icon"
              @touchstart.prevent="call(info.appUserItem)"
            >&#xe618;</a>
          </li>
        </ul>
      </div>
      <div class="gray_bg"></div>
      <div class="detail_box" v-show="info.equipmentItem!=''">
        <h2 class="dborder">监测设备</h2>
        <ul>
          <li>
            <span>设备名称</span>
            {{info.equipmentItem.name}}
          </li>
          <li>
            <span>设备编码</span>
            {{info.equipmentItem.equipmentcode}}
          </li>
          <li>
            <span>安装日期</span>
            {{info.equipmentItem.startTime}}
          </li>
          <li>
            <span>设备厂商</span>
            {{info.equipmentItem.manufacturer}}
          </li>
          <li>
            <span>设置状态</span>
            {{info.equipmentItem.status}}
          </li>
        </ul>
      </div>
      <div class="gray_bg"></div>
      <div class="detail_box">
        <h2 class="dborder">历史记录</h2>
        <h3 class="dborder" v-show="gasLeakList.length>0">
          燃气泄漏
          <span @touchstart.prevent="historyRecordJump">
            {{gasLeakList.length}}次
            <i class="iconfont iconnext"></i>
          </span>
        </h3>
        <h3 v-show="airList.length>0">
          沼气
          <span @touchstart.prevent="historyRecordJump">
            {{airList.length}}次
            <i class="iconfont iconnext"></i>
          </span>
        </h3>
        <h3 v-show="wrongList.length>0">
          误报
          <span @touchstart.prevent="historyRecordJump">
            {{wrongList.length}}次
            <i class="iconfont iconnext"></i>
          </span>
        </h3>
      </div>
      <div class="empty" style="height:2rem"></div>
    </div>
   
  </div>
</template>

<script type="text/ecmascript-6">
import monitorCurve from "@/components/monitoringCurve";
import appapi from "@/common/appapi.js";
import * as maputil from "@/js/MapUtil.js"
export default {
  name: "gasAlarmInfo",
  props: {
    detailTit: {
      default: true
    },
    infos: {
      type: Array,
      default: () => []
    },
    alarmType:{
      type:Number,
      defalut: () => 0
    }
  },
  data() {
    return {
		newDetailTit:false,
      info: {
        jsonObject:{
          times:[],
          values:[],
          wendu:[],
          limitVal:0,
          max:0,
          maxTime:""
        },
        alarmFellBackTO:{
          feedback:"",
          alarmId:0,
          feedbackpers:"",
          resTime:"",
        },
        appLocalHistoryDetails:[],
      },
      index: -1,
      distance:"",
      dealTypeStr: "",
      gasLeakList: [],
      airList: [],
      wrongList: [],
      item: {
        title: "燃气井RQ14059燃气泄漏预警",
        len: "1.6km",
        pos: "位置位置位置",
        value: "5.4%VOL",
        level: "Ⅱ级(重大)",
        date: "2019-09-11 13:32:12"
      },
      timeList:[],
      gasContentList:[],
      temprList:[],
      limitVal:[],
      dealRecordList:[],
      maxVal:"",
      maxValTime:"",
    };
  },
  components: {
    monitorCurve
  },
  watch: {
    infos: {
      handler: function(newVal) {
       this.select(0)
      },
      immediate: true
    }
  },
  methods: {
	  toogleDeailTit(){
		this.newDetailTit = !this.detailTit
		this.$emit('update:detailTit',this.newDetailTit);
	  },
    // 横向监测曲线
    horizontalCurve() {
      let _this=this;
      // appapi.setscreen("Horizontal")
      var pipeid = ""
      if(_this.info.alarmXYZDO){
        pipeid = _this.info.alarmXYZDO.pipepointid
      }else{
        pipeid = "error"
      }
      setTimeout(function(){
      _this.$router.push({
        name: "horizontalCurve",
        query: {
          maxVal:_this.maxVal,
          maxValTime:_this.maxValTime,
          pipepointid: pipeid,
          ModleId:_this.info.alarmXYZDO.inorun,
          type:_this.alarmType
        }
      });
      },500);
    },
    gotoDealResult() {
      console.log("------gotoDealResult");
      var _this = this;
      this.$router.push({
        name: "feedbackresult",
        query: {
          userId: _this.$route.query.userId,
          alarmId: this.info.alarmFellBackTO.alarmId,
          dealTypeStr: this.dealTypeStr,
          dealPerson: this.info.alarmFellBackTO.feedbackpers,
          dealTime: this.info.alarmFellBackTO.resTime,
          dealType: this.info.alarmDealType.dealType,
        }
      });
    },
    historyRecordJump() {
      this.$router.push({
        name: "historicalRecord",
        query: {
          historyList: this.dealRecordList
        }
      });
    },
    gotodisposalResult(){
      console.log("------gotodisposalResult");
        var _this = this;
      this.$router.push({
        name: "warningDisposalResult",
        query: {
          info: _this.info,
        }
      });
    },
    ishow(e) {
      var index = this.index;
      if (e == "left") {
        if (index == 0 || index == -1) {
          return false;
        } else {
          return true;
        }
      } else if (e == "right") {
        if (index + 1 == this.infos.length) {
          return false;
        } else {
          return true;
        }
      }
    },
    getSelectedAlarmId(){
      return this.info.alarmXYZDO.alarmId
    },
    setData(){ // 统一设置数据
      this.getlocation()
      var historyList = this.info.appLocalHistoryDetails
      for(var i=0;i<historyList.length;i++){
        var item = historyList[i];
        if(item.type == "燃气泄漏"){
          this.gasLeakList = item.localHistoryDetails
        } else if(item.type == "沼气"){
          this.airList = item.localHistoryDetails
        } else {
          this.wrongList = item.localHistoryDetails
        }
        this.dealRecordList = this.dealRecordList.concat(item.localHistoryDetails)
      }
      if(this.info.jsonObject){
        this.timeList = this.getFormatDate(this.info.jsonObject.times,true)
        this.gasContentList= this.getFormatDate(this.info.jsonObject.values,true)
        this.temprList = this.getFormatDate(this.info.jsonObject.wendu,true)
        this.limitVal=this.getFormatDate(this.info.jsonObject.limitVal,false)
        this.maxVal = this.getFormatDate(this.info.jsonObject.max,false)
        this.maxValTime = this.getFormatDate(this.info.jsonObject.maxTime,false)
      }
      if(this.info.alarmFellBackTO){
        this.dealTypeStr = this.getFormatDate(this.info.alarmFellBackTO.feedback,false)
      }

    },
    select(position){
       this.setindex(position);
        this.info = this.infos[position];
        // 设置数据
        this.setData()

    },
    call(phone){
      appapi.callphone(phone);
    },
    getlocation(){
      var _this=this
      appapi.getlocation(function(e){
        var lon=_this.info.alarmXYZDO.longtitude
        var lat=_this.info.alarmXYZDO.latitude
        var p1=[lon,lat]
        var p2=[e.lon,e.lat]
        _this.distance=maputil.distance(p1,p2)
      })
    },
    getFormatDate(res,isArray){
      if(res){
        return res
      }else if(isArray){
        return []
      }else{
        return ""
      }
    }
  },
  computed: {
    setindex() {
      return function(position) {
        return (this.index = position);
      };
    },
    getstate: function() {
      let type=this.info.alarmDealType.dealType
      let content = "";
      if (type == 1) {
        content = "未处置";
      }
      if (type == 2) {
        content = "处置中";
      }
      if (type == 3) {
        content = "已处置";
      }
      return content;
    }
  }
};
</script>

<style lang="stylus" scoped>
.detail_text {
  width: 100%;
  height: 0.41rem;
  background: url('../assets/images/detail_bg.png') no-repeat center;
  background-size: auto 100%;
  margin: 0 auto;
  display: block;
  text-align: center;
  line-height: 0.41rem;
  color: #428ee3;
  font-size: 0.24rem;

  i {
    font-size: 0.24rem;
  }

}
.hide_detail_text .iconshanglaBox{
	transition: all .3s;
	transform:rotate(180deg);
	display:inline-block;
}

_colorbg(color, bg) {
  color: color;
  background: bg;
}

button.notdisposal {
  _colorbg(#e8555b, rgba(232, 86, 90, 0.1));
}

.disposaling {
  _colorbg(#faa762, rgba(250, 167, 98, 0.1));
}

.hasdisposal {
  _colorbg(#81c26b, rgba(129, 194, 107, 0.1));
}

.d_curve_box {
  display: flex;
}

.detail_box {
  margin: 0 0.3rem;
  color: #2a2c32;
  font-size: 0.36rem;

  i {
    float: right;
    color: #c2c5c6;
  }

  h2 {
    height: 0.93rem;
    line-height: 0.93rem;
    line-height: 0.93rem;
  }

  h3 {
    height: 0.9rem;
    line-height: 0.9rem;
    font-weight: normal;
    position: relative;

    span {
      float: right;
      color: #666666;

      i {
        padding-left: 0.23rem;
      }

      button {
        width: 1.5rem;
        height: 0.6rem;
        line-height: 0.6rem;
        padding: 0 0.1rem;
        border: 0;
        font-size: 0.24rem;
        border-radius: 8px 0 8px 0;
        vertical-align: middle;
        text-align: center;
      }
    }
  }

  ul {
    padding: 0.05rem 0;

    li {
      line-height: 0.64rem;

      span {
        width: 2rem;
        display: inline-block;
        color: #666;
      }
    }
  }
}

.baidumap_icon {
  width: 0.6rem;
  height: 0.6rem;
  background: #428ee3 url('../assets/images/here.png') no-repeat center;
  background-size: 50%;
  position: absolute;
  right: 0.3rem;
  top: 0.6rem;
  border-radius: 50%;
}

.ml30 {
  margin-left: 0.9 rem;

  >div {
    position: relative;
  }

h5 {
    font-size: 0.36rem;
    color: #2a2c32;
    padding: 0.3rem 0 0.3rem 0;
  }

  p {
    color: #2a2c32;
    font-size: 0.24rem;
  }
}

.dborder {
  border-bottom: #dde0e4 1px solid;
}

.gray_bg {
  background: #f5f6fa;
  height: 0.1rem;
}

.max_val {
  height: 0.5rem;
  line-height: 0.5rem;
  margin: 0.3rem 0;
  background: rgba(66, 142, 227, 0.16);
  padding-left: 0.24rem;
  color: #428ee3;
  font-size: 0.22rem;

  span {
    float: right;
    padding-right: 0.22rem;
  }
}

.warning_list {
  position: relative;
  overflow-y:auto;
  height:calc(100% - 0.41rem);
}

.warn_rightbtn {
  background: url('../assets/images/left-btn.png') no-repeat;
  background-size: 90% 90%;
  right: 0;
}

.warn_leftbtn {
  background: url('../assets/images/right-btn.png') no-repeat;
  background-size: 90% 90%;
  left: 0;
}

.wbtn {
  width: 0.9rem;
  height: 1.42rem;
  position: absolute;
  display: block;
  top: 0.2rem;
}

.vol {
  color: #faa762;
  font-size: 0.24rem;
  padding: 0.3rem 0;

  b {
    height: 0.33rem;
    padding: 0.08rem 0.16rem;
    font-weight: normal;
    border: #faa762 1px solid;
    border-radius: 0.03rem;
    font-size: 0.24rem;
    margin-left: 0.28rem;
  }

  span {
    float: right;
    padding-right: 0.3rem;
    color: #999999;
  }
}

.telephoneStyle {
  color: #4C94E4;
}
</style>
